<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <hr>
        <my-head></my-head>
        <hr>
        <h2>msg==={{msg}}</h2>
        <h2>flag=={{flag?'aa':'bb'}}</h2>
        <base-input v-model="msg" type="text"></base-input>
        <basecheck v-model="flag"></basecheck>


    </div>
    <template id="myhead">
        <div>
            <h2>myhead - myhead - wh2204 daydayup</h2>
        </div>
    </template>

    <template id="baseinput">
        <div>
            <input :type="type" :value="msg" @input="$emit('input',$event.target.value)">
        </div>
    </template>

    <template id="basecheck">
        <div>
            <input type="checkbox" :check="hnmjgmu" @change="$emit('ghgnfkfadsd',$event.target.checked)">请先同意一下我们的条款!
        </div>
    </template>
    
    <script>
        const bus = new Vue()   // 空的Vue实例当做 事件总线  (emit on once)
        Vue.component("myHead",{
            template:"#myhead",
        })
       
        Vue.component('base-input',{
            template:'#baseinput',
            model:{
                event:'input',
                prop:'msg'
            },
            props:{
                msg:String,
                type:String
            }
        })

        Vue.component('basecheck',{
            template:'#basecheck',
            model:{
                event:'ghgnfkfadsd',
                prop:'hnmjgmu'
            },
            props:{
                hnmjgmu:Boolean
            }

        })

        const vm = new Vue({
            el:"#app",
            data:{
                title:"组件通过 v-model 实现数据通信 ",
                msg:"wh2204-daydayup",
                flag:true 
            },
            mounted(){
                document.getElementsByTagName('title')[0].innerHTML = this.title;
            }
        })
    </script>
      <!-- 
        组件使用 v-model 
        v-model 用于组件(组件上必须带Input )
         父改子 props
         子改父 自定义事件 
     -->
</body>
</html>